<template>
  <a-modal v-model:open="open" title="分享文件"
           :footer="false"
           width="720px"
           @cancel="close"
          >
    <div class="content flex between">
      <div class="left flex column between">
      <div>
        <div class="message flex alignCenter">
          <CheckCircleFilled />
          <span>成功创建分享链接</span>
        </div>
        <div class="flex alignCenter">
          <a-input v-model:value="from.shareKey"
                   style="margin-right: 10px"
                   readonly
          >
            <template #addonAfter>
              {{from.expireDays!=-1?`${from.expireDays}天有效`:'永久'}}有效
            </template>
          </a-input>
          <a-button type="primary" @click="copy">{{!from.code?'复制链接':'复制链接及提取码'}}</a-button>
        </div>
        <div class="flex alignCenter" v-if="from.code">
          <a-form-item label="提取码" style="margin: 20px 0">
            <a-input v-model:value="from.code"
                     style="margin-right: 10px;width: 100px"
                     readonly

            >

            </a-input>
          </a-form-item>
        </div>
      </div>

        <span
        style="color: #bbb"
        >配合净网行动, 网盘严厉打击色情低俗等不良信息的传播行为</span>
      </div>
      <div class="right flex column alignCenter">
        <img :src="from.qrCodeUrl" style="width: 200px;height: 200px;"/>
        <span>扫描二维码快速分享</span>
      </div>
    </div>
  </a-modal>
</template>
<script setup lang="ts">
import {computed, ref} from "vue";
import {message} from "ant-design-vue";
import {CheckCircleFilled} from '@ant-design/icons-vue'
import {ShareBaseInfo} from '@/types/global.ts'
import {copyTextToClipboard} from '@/utils'
const props = defineProps({
  modelValue:{
    type:Boolean,
    default:false
  },
  shareInfo:{
    type:Object,
    default: ()=>{
      return {} as ShareBaseInfo
    }
  }
})
const emits = defineEmits(['update:modelValue','confirm']);
const open = computed(()=>props.modelValue)
const from = computed(()=>props.shareInfo)



const close = () => {
  emits("update:modelValue",false)
}
const copy = ()=>{

  let data = '我用'+import.meta.env.VITE_APP_NAME+'分享了「'+
      from.value.name
      +'」，点击链接即可保存。\n 链接：'+from.value.shareKey
  if(from.value.code){
    data +=`\n提取码：${from.value.code}`
  }

  try {
    copyTextToClipboard(data);
    message.success("复制成功")
  }catch (e){
    message.error("复制失败")
  }
}

</script>
<style scoped lang="scss">
.fileName{
  font-size: 24px;
  font-weight: bold;
  margin: 20px 0;
}
.message{
  margin:30px 0;
  :deep(.anticon){
    font-size: 30px;
    color: #2696ff;
    margin-right: 10px;
  }
  span{
    font-size: 18px;
    font-weight: bold;

  }
}
</style>
